<template>
  <div class="about">
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
        height="650">
        <el-table-column
          fixed
          prop="name"
          label="项目名称"
          width="140">
          <template #header>
            <el-tooltip class="item" effect="dark" content="每个项目的最新一次报告" placement="top-start"
                        >
              <span icon="el-icon-warning-outline" style="display: inline-block">项目名称</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="lineCoverage"
          label="行级代码覆盖率（%）"
          width="260">
          <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="20"
              :percentage="scope.row.lineCoverage"
              :status="scope.row.lineCoverage === 100 ? 'success' : null">
            </el-progress>
          </template>
        </el-table-column>
        <el-table-column
          prop="branchCoverage"
          label="分支代码覆盖率（%）"
          width="260">
          <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="20"
              :percentage="scope.row.branchCoverage"
              :status="scope.row.branchCoverage === 100 ? 'success' : null">
            </el-progress>
          </template>
        </el-table-column>
        <el-table-column
          label="报告地址"
          width="140">
          <template slot-scope="scope">
            <a :href="scope.row.reportUrl" target="_blank">报告地址</a>
            <br>
            <a :href="scope.row.mergeReportUrl" v-if="scope.row.mergeReportUrl" target="_blank"
            >合并报告地址</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="logFile"
          label="日志文件"
          width="100">
          <template slot-scope="scope">
            <a :href="scope.row.logFile" target="_blank">日志文件</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="报告生成时间"
          width="200">
        </el-table-column>
        <el-table-column
          prop="comment"
          label="备注信息"
          width="200">
        </el-table-column>
        <el-table-column
          prop="errMsg"
          label="操作"
          width="180">
          <template v-slot="scope">
            <el-button
              size="mini"
              @click="ExecutionStatistics(scope.row.uuid)" style="stroke-width:-12"
              icon="el-icon-refresh-left">
              执行统计</el-button>
            <el-button
              size="mini"
              @click="Setuuid(scope.row.uuid,scope.row.name)"
              style="margin-left: 0;margin-top: 2px"
              icon="el-icon-edit">
              添加备注</el-button>
            <el-tooltip class="item" effect="dark" content="请先合并数据后再次操作合并报告"
                        placement="top-start">
              <el-button
                size="mini"
                @click="mergeJacocoExec(scope.row.uuid)" style="stroke-width:-15;
                margin-top: 2px; margin-left: -1px"
                icon="el-icon-connection">
                合并数据</el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="请先合并数据后再次操作合并报告"
                        placement="top-start">
              <el-button
                size="mini"
                @click="mergeReport(scope.row.uuid)"
                style="margin-left: 0;margin-top: 2px"
                icon="el-icon-document-add">
                合并报告</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="errMsg"
          label="错误信息"
          width="120">
          <template slot-scope="scope">
            <el-button v-if="scope.row.errMsg" type="text" @click="setErrMsg(scope.row.errMsg)">
              查看错误信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div>
      <el-dialog
        title="添加备注"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        备注信息： <el-input
        placeholder="请输入项目备注信息"
        v-model="comment"
        style="width: 300px"
        clearable>
      </el-input>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="AddNotes">确 定</el-button>
  </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisibles"
        width="30%"
        :before-close="handleCloses">
        <span>{{this.errnoMsg}}</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibles = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisibles = false">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>

// eslint-disable-next-line no-unused-vars
import request from '@/api/request_api';

export default {
  methods: {
    handleCloses(done) {
      this.$confirm('确认关闭？')
        // eslint-disable-next-line no-unused-vars
        .then((_) => {
          done();
        })
        // eslint-disable-next-line no-unused-vars
        .catch((_) => {});
    },
    setErrMsg(errMsg) {
      this.dialogVisibles = true;
      this.errnoMsg = errMsg;
    },
    // eslint-disable-next-line no-unused-vars
    async mergeJacocoExec(uuid) {
      const encodedParams = new URLSearchParams();
      encodedParams.set('uuid', uuid);
      // eslint-disable-next-line no-unused-vars
      const url = '/cov/mergeJacocoExec';
      // eslint-disable-next-line no-unused-vars
      const response = await this.$formPostRequest.post(url, encodedParams);
      if (response.data.code === 200 && response.data.msg === 'success') {
        this.$message({
          message: response.data.data,
          type: 'success',
        });
        this.getReportList();
      } else {
        this.$message({
          message: '合并报告数据失败',
          type: 'error',
        });
      }
    },
    async mergeReport(uuid) {
      const encodedParams = new URLSearchParams();
      encodedParams.set('uuid', uuid);
      // eslint-disable-next-line no-unused-vars
      const url = '/cov/mergeReport';
      // eslint-disable-next-line no-unused-vars
      const response = await this.$formPostRequest.post(url, encodedParams);
      if (response.data.code === 200 && response.data.data === '合并报告成功') {
        this.$message({
          message: response.data.data,
          type: 'success',
        });
        this.getReportList();
      } else {
        this.$message({
          message: '合并报告失败',
          type: 'error',
        });
      }
    },
    async AddNotes() {
      this.dialogVisible = false;
      // 发送请求
      const encodedParams = new URLSearchParams();
      encodedParams.set('uuid', this.uuid);
      encodedParams.set('comment', this.comment);
      // eslint-disable-next-line no-unused-vars
      const response = await this.$formPostRequest.post('//cov/updateComment', encodedParams);
      // 判断接口返回， 提示+刷新数据
      this.comment = '';
      if (response.data.code === 200) {
        this.$message({
          message: '添加成功',
          type: 'success',
        });
        this.getReportList();
      } else {
        this.$message({
          message: '添加失败',
          type: 'error',
        });
      }
    },
    Setuuid(uuid, name) {
      this.dialogVisible = true;
      this.uuid = uuid;
      this.name = name;
      this.$getRequest.get(`/cov/getLatestEnvCoverResultList?pageIndex=1&pageSize=20&name=${this.name}`)
        .then((resp) => {
          // eslint-disable-next-line no-console
          console.log(resp.data.data.list);
          this.comment = resp.data.data.list[0].comment;
        });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        // eslint-disable-next-line no-unused-vars
        .then((_) => {
          done();
        })
        // eslint-disable-next-line no-unused-vars
        .catch((_) => {});
    },
    handleClick(row) {
      // eslint-disable-next-line no-console
      console.log(row);
    },
    getReportList() {
      this.$getRequest.get('/cov/getLatestEnvCoverResultList?pageIndex=1&pageSize=20')
        .then((resp) => {
          // eslint-disable-next-line no-console
          console.log(resp.data.data.list);
          // eslint-disable-next-line prefer-destructuring
          this.tableData = resp.data.data.list;
          // eslint-disable-next-line no-console
          console.log('测试数据：');
          // eslint-disable-next-line no-console
          console.log(this.tableData);
        });
    },
    // eslint-disable-next-line no-unused-vars
    async ExecutionStatistics(uuid) {
    //   点击执行统计触发此方法
      const encodedParams = new URLSearchParams();
      encodedParams.set('uuid', uuid);
      // eslint-disable-next-line no-unused-vars
      const response = await this.$formPostRequest.post('/cov/calculateEnvCov', encodedParams);
      if (response.data.code === 200) {
        this.$message({
          message: '执行成功！',
          type: 'success',
        });
        this.getReportList();
      } else {
        this.$message({
          message: '执行失败！',
          type: 'error',
        });
      }
    },
  },

  data() {
    return {
      dialogVisible: false,
      tableData: [],
      dialogVisibles: false,
      errnoMsg: '',
      uuid: '',
      comment: '',
      name: '',
    };
  },
  created() {
    // eslint-disable-next-line no-undef
    this.getReportList();
  },
};
</script>

<style scoped>
.about {
  margin-left: 50px;
  margin-top: -10px;
}
</style>
